<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>methods方法完成姓名拼写</title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 创建一个容器 -->
		 <div id="box">
		 	姓：<input type="text" v-model="firstName"><br/><br/>
			名：<input type="text" v-model="lastName"><br/><br/>
			全名：<span>{{fullName()}}</span><br/><br/>
			全名：<span>{{fullName()}}</span><br/><br/>
			全名：<span>{{fullName()}}</span><br/><br/>
			全名：<span>{{fullName()}}</span><br/><br/>
			全名：<span>{{fullName()}}</span>
		 </div>
		 <script type="text/javascript">
		 	Vue.config.productionTip=false//阻止 vue 在启动时生成生产提示
			// 创建一个vue实例
			let vm=new Vue({
				el:'#box',
				data:{
					firstName:"张",
					lastName:"三"
				},
				methods: {
					fullName(){
						console.log('@@')// 数据发生变化，模板要重新解析，模板里如果调用了vue实例的方法，则每次解析的时候会重新调用一遍方法
						return this.firstName+'-'+this.lastName
					}
				},
			})
		 </script>
	</body>
</html>